<template>
  <li
    :style="{ backgroundColor: backgroundValue, color: colorValue }"
    @mouseenter="mouseHandler(true)"
    @mouseleave="mouseHandler(false)"
  >
    <!-- el-checkbox传递自定义数据 -->
    <!--  @change="checked => changeTodoStatus(index, checked)" -->

    <div>
      <input
        :id="'todo-checkbox-' + todoItemData.id"
        type="checkbox"
        :checked="todoItemData.isComplete"
        @change="changeTodoStatus"
        :value="todoItemData.id"
      />

      <label :for="'todo-checkbox-' + todoItemData.id">{{ todoItemData.title }}</label>
    </div>

    <el-button
      type="danger"
      icon="el-icon-delete"
      circle
      size="small"
      v-show="isDeleShow"
      @click="removeSelectTodo"
    ></el-button>
  </li>
</template>

<script lang="ts">
import { defineComponent, inject, provide, ref } from 'vue';
import { TodoItemModel } from '@/type-scripts/todo-model';
export default defineComponent({
  name: 'TodoItem',
  props: {
    todoItemData: TodoItemModel,
    index: Number,
  },
  setup(props) {
    const backgroundValue = ref('transparent');
    const colorValue = ref('black');
    const isDeleShow = ref(false);
    const mouseHandler = (isEnter: boolean) => {
      if (isEnter) {
        backgroundValue.value = 'rgba(64, 158, 255,0.2)';
        colorValue.value = '#0075ff';
        isDeleShow.value = true;
      } else {
        backgroundValue.value = 'transparent';
        colorValue.value = 'black';
        isDeleShow.value = false;
      }
    };
    // 注入父组件 App.vue中的组件
    const modifyTodoStatus: any = inject('modifyTodoStatus');
    const removeTodoItem: any = inject('removeTodoItem');

    // 修改状态
    let changeTodoStatus = (changeEvent: any) => {
      // 获取当前checkbox是否选中
      let checked = changeEvent.target.checked;
      modifyTodoStatus(props.index, checked);
    };

    // 移除指定项
    let removeSelectTodo = () => {
      removeTodoItem(props.index);
    };

    return {
      backgroundValue,
      colorValue,
      mouseHandler,
      changeTodoStatus,
      isDeleShow,
      removeSelectTodo,
    };
  },
});
</script>

<style lang="scss" scoped>
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $item-height;
  line-height: $item-height;
  box-sizing: border-box;
  padding: 0 10px;
}
</style>
